<style tyle="text/css">
.single-banner-wrapper::before {
    position: absolute;
    display: block;
    content: '';
    background: #000;
    height: 100%;
    width: 100%;
    opacity: .01;
}
.b-header .myBar {
  padding: 5px 0;
}
.tenways-index .content-for-layout .single-banner {
  margin-top: 0;
  margin-bottom: 0;
  background-color: #171006;
}
.single-banner .banner-context {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  left: 0;
  color: #fff;
}

.single-banner .banner-context-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
}
.single-banner .single-banner-container {
  position: relative;
}

.single-banner .banner-context-wrapper__container {
  margin-bottom: 20px;
}

.single-banner .banner-context .banner-content-text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  max-width: 470px;
}
.single-banner .banner-context .banner-content-text.content-title {
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  padding: 15px 0;
}

.single-banner .banner-context .banner-content-bottom {
  
}

.banner-content-bottom .button {
  background: linear-gradient(180deg,#599BF4 0%,#0D74FF 100%);
}

.banner-content-bottom .no-bg {
  padding: 0;
  margin-left: 20px;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}
.banner-content-bottom .no-bg svg {
  margin-left: 10px;
}

.banner-content-bottom .no-bg path {
  stroke: #fff;
}

.banner-content-bottom.mb-buttom {
  display: none;
}

.banner-content-bottom.pc-buttom {
  display: block;
}
.single-banner .buttom-serve {
  position: static;
}

.banner_link_wrapper {
  cursor: pointer;
}
.single-banner-wrapper .banner__media.media img {
  height: 100%;
  width: 100%;
}

.single-banner-wrapper .pc-banner video, .single-banner-wrapper .image_mobile video {
  display: block;
}
.content-title span{
  color: #9265F7;
}

@media screen and (max-width: 990px) {
  .tenways-service p {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
  }
  
  .single-banner .banner-context-wrapper {
    padding: 0 26px;
  }
  .single-banner .banner-context .banner-content-text.content-title {
    font-size: 24px;
  }
  .single-banner .image_mobile {
    display: block;
  }
}

@media screen and (max-width: 750px) {
  .single-banner__media {
    min-height: auto;
  }
  .banner-content-bottom.mb-buttom {
    display: block;
  }

  .banner-content-bottom.pc-buttom {
    display: none;
  }
  .single-banner .pc_banner {
    display: none;
  }
  .single-banner .image_mobile {
    min-height: 558px;
    display: block;
  }
  .single-banner .banner-context {
    top: 24px;
    transform: none;
  }
  .single-banner .buttom-serve {
    position: relative;
    background: #000;
  }
  .single-banner .banner-context-wrapper {
    width: 100%;
    padding: 0 20px;
    margin: 0;
    text-align: center;
  }
  .single-banner .banner-context .banner-content-text {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    max-width: 100%;
  }
  .single-banner .banner-context .banner-content-text.content-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    padding: 10px 0;
  }
  
  .single-banner .banner-context .banner-content-text.content-desc {
    font-size: 12px;
    line-height: 20px;
  }
  
  .single-banner .banner-content-bottom {
    position: absolute;
    bottom: 36px;
    width: 100%;
  }
  .banner-content-bottom__container {
    text-align: center;; 
  }
  .single-banner .mobeil_line {
    display: block;
    text-align: center;
  }
  .single-banner .buttom-serve svg {
    margin: 0 auto;
  }
  .tenways-service p {
    margin: 5px auto 0;
  }
}

</style>

<div class="single-banner-wrapper single-banner-container">
  <div class="center pc-banner">
    <a href="{{ section.settings.button_link }}">
      {% if section.settings.video != blank %}
        {{ section.settings.video }}
      {% endif %}
    </a>
  </div>
  <div class="center image_mobile">
    <a href="{{ section.settings.button_link }}">
      {% if section.settings.video_mobile != blank %}
        {{ section.settings.video_mobile }}
      {% endif %}
    </a>
  </div>
  <a class="banner_link" href="{{ section.settings.button_link }}"></a>
  <div class="banner-context banner_link_wrapper">
    <div class="banner-context-wrapper">
      <div class="banner-context-wrapper__container">
        <div class="banner-content-text content-text">
          {{ section.settings.text1 }}
        </div>
        <div class="banner-content-text content-title">
          {{ section.settings.heading }}
        </div>
        <div class="banner-content-text content-text content-desc">
          {{ section.settings.desc }}
        </div>
      </div>
      <div class="banner-content-bottom pc-buttom">
        <div class="banner-content-bottom__container">
          {%- if section.settings.button_label != blank -%}
            <a href="{{ section.settings.button_link }}"  class="bg-button tenways-hover button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true"{% endif %}>
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
          {%- if section.settings.order_now != blank -%}
            <a href="{{ section.settings.order_now_link }}" class="no-bg tenways-hover button--primary" {% if section.settings.order_now_link == blank %} aria-disabled="true"{% endif %}>
              {{ section.settings.order_now | escape }}{% render 'icon-explore' %}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
  <div class="banner-content-bottom mb-buttom">
    <div class="banner-content-bottom__container">
      {%- if section.settings.button_label != blank -%}
        <a href="{{ section.settings.button_link }}"  class="bg-button tenways-hover button button--primary"{% if section.settings.button_link == blank %} aria-disabled="true"{% endif %}>
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
      {%- if section.settings.order_now != blank -%}
        <a href="{{ section.settings.order_now_link }}" class="no-bg tenways-hover button--primary" {% if section.settings.order_now_link == blank %} aria-disabled="true"{% endif %}>
          {{ section.settings.order_now | escape }}{% render 'icon-explore' %}
        </a>
      {%- endif -%}
    </div>
  </div>
</div>
<div class="buttom-serve tenways-service">
  <div class="page-width">
    <div class="swiper-father"> 
      <ul>
        {%- for block in section.blocks -%}
          {%- case block.type -%}
          {%- when 'column' -%}
            <li {{ block.shopify_attributes }}>
                <div class="multicolumn-card__info">
                  <div class="mobeil_line">
                    {%- if block.settings.html != blank -%}
                    <div class="info">
                      <span>
                    {{ block.settings.html }}
                    </span>
                  </div>
                  {%- endif -%}
                  {%- if block.settings.title != blank -%}
                    <p>{{ block.settings.title | escape }}</p>
                  {%- endif -%}
                  </div>
                </div>
            </li>
        {%- endcase -%}
      {%- endfor -%}
      </ul>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Single Banner",
  "class": "single-banner spaced-section spaced-section--full-width",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "name",
      "label": "Product title"
    },
    {
      "type": "html",
      "id": "video",
      "label": "video"
    },
    {
      "type": "html",
      "id": "video_mobile",
      "label": "video mobile"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "adapt"
        },
        {
          "value": "small",
          "label": "small"
        },
        {
          "value": "large",
          "label": "large"
        }
      ],
      "default": "adapt",
      "label": "adapt"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "text1"
    },
    {
      "type": "html",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "desc",
      "label": "Desc"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "button_label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "button link"
    },
    {
      "type": "text",
      "id": "order_now",
      "default": "Order Now",
      "label": "Order Now"
    },
    {
      "type": "url",
      "id": "order_now_link",
      "label": "Order Now Link"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "column",
      "settings": [
        {
          "type": "html",
          "id": "html",
          "default": "html",
          "label": "html"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "t:sections.multicolumn.blocks.column.settings.title.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Single Banner"
    }
  ]
}
{% endschema %}